<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        html {
            font-size: calc(100vw / 750);
        }

        /* 固定像素 */
        .fu {
            width: 500px;
            height: 500px;
            background-color: #00f;
        }

        .zi {
            width: 300px;
            height: 300px;
            background-color: #0f0;
        }

        /* 相对于父级的百分比 */
        .zi {
            width: 30%;
            height: 30%;
        }

        /* vw：可视区域宽度  vh:可视区域高度 */
        .fu {
            width: 100vh;
            height: 100vw;
        }

        /* em  父元素 的字体大小 */
        .fu {
            font-size: 30px;
        }

        .zi {
            width: 10em;
            height: 10em;
        }

        /* rem 根元素*/
        .zi {
            width: 100rem;
            height: 100rem;
        }


        .box {
            display: flex;
        }

        .left {
            width: 30%;
            background-color: #0f0;
            height: 100px;
        }

        .center {
            width: 50%;
            background-color: #00f;
            height: 100px;
        }

        .right {
            width: 20%;
            background-color: #f00;
            height: 100px;
        }

        @media screen and (max-width:1200px) and (min-width:800px) {
            .left {
                width: 10%;
                background-color: #000;
            }

            .center {
                width: 30%;
                background-color: orange;
            }

            .right {
                width: 60%;
                background-color: aqua;
            }
        }

        @media screen and (max-width:800px) {
            .left {
                width: 50%;
                background-color: #ccc;
            }

            .center {
                width: 10%;
                background-color: red;
            }

            .right {
                width: 40%;
                background-color: green;
            }
        }


        /* 媒体查询  @media 设备 and (区间) and (区间){} */
        /* @media screen and (max-width:1600px) and (min-width:1000px) {
        } */
        /* 设备：
        all  所有设备
        screen  移动设备  手机  平板  电脑  笔记本
        speech  阅读器
        print   打印机
         */



        /* 
            width/height
            device-width/device-height   设备宽高
            orientation-width/orientation-height   屏幕：横屏/竖屏
         */
    </style>
</head>

<body>
    <!-- 移动端布局 -->
    <!-- 固定布局 -->
    <!-- 流动布局   响应式布局 -->
    <!-- px % vh vw em rem -->


    <!-- <div class="fu">
        <div class="zi"></div>
    </div> -->

    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>




</body>

</html>